<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>New commit</title>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="changelog.css">
  <style>
	body {margin:0;padding:0 10px;}
	#addli {cursor:pointer;}
	span {font-weight:bold;}
	span.icon {width:16px;height:16px;display:inline-block;float:right;}
	input.li {width:100%;}
	#table {width:99%;}
	#result {width:100%;}
  </style>
  <script type="text/javascript">
	var i=1;	
	function createli(event){
		event.preventDefault();
		var liclass = $('#litype').val();
		$('#table').append($('<tr><td><span class="icon '+liclass+'"></span><span>'+i+'.</span></td><td><input name="'+liclass+'" type="text" value="" class="li"></td></tr>'));
		i++;
	}	
	function htmlEscape(str) {
		return String(str)
				.replace(/&/g, '&amp;')
				.replace(/"/g, '&quot;')
				.replace(/'/g, '&#39;')
				.replace(/</g, '&lt;')
				.replace(/>/g, '&gt;');
	}	
	$(document).ready(function(){
		$('#addli').click(createli);
		$('#commit').submit(function(event){			
			event.preventDefault();
			var result = $('#result');
			var text = '<div class="commit sansserif">\n';
			text += '\t<h2 class="date">'+$(this.date).val()+'</h2>\n';
			text += '\t<h3 class="author">'+$(this.author).val()+' updated:</h3>\n';
			text += '\t<ul class="changes bgimages16">\n';
			$('input.li').each(function(){
				text += '\t\t<li class="'+$(this).attr('name')+'">'+$(this).val()+'</li>\n';
			});
			text += '\t</ul>\n';
			text += '</div>\n';			
			result.val(text);
		});
	});
</script>
</head>
<body>
<form id="commit" name="commit">
<table id="table">
<tr><td style="width:100px;"><span>Date:</span></td><td><input type="text" name="date" value="" title="Put date here"></td></tr>
<tr><td><span>Author:</span></td><td><input type="text" name="author" value="" title="Put your name here"></td></tr>
<tr><td><span>Add list item</span></td><td>
<select name="litype" id="litype" title="Select change type and hit +">
<option value="rscadd">Added feature</option>
<option value="rscdel">Removed feature</option>
<option value="bugfix">Bugfix</option>
<option value="wip">Work in progress</option>
<option value="tweak">Tweak</option>
<option value="experiment">Experimental feature</option>
<option value="imageadd">Added icon</option>
<option value="imagedel">Removed icon</option>
<option value="soundadd">Added sound</option>
<option value="sounddel">Removed sound</option>
</select>
<button id="addli">+</button>
</td></tr>
</table>
<input type="submit" value="Get HTML" title="Click here to get result">
</form>
<textarea id="result" rows="20" cols="50"></textarea>
</body>
</html>